﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>万里金融系统</title>
	<link href="../../css/css.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/base.js"></script>
	<script src="../../js/template.js"></script>
	<script src="../../js/bootstrap-paginator.js"></script>
	<script src="../../js/bootstrap-mypaginator.js"></script>
	<style type="text/css">
		.pagination {
			display: inline-block;
			padding-left: 0;
			margin: 20px 0;
			border-radius: 4px;
		}

		.pagination>li {
			display: inline;
		}

		.pagination>li>a,
		.pagination>li>span {
			position: relative;
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
			line-height: 1.42857143;
			color: #428bca;
			text-decoration: none;
			background-color: #fff;
			border: 1px solid #ddd;
		}

		.pagination>li:first-child>a,
		.pagination>li:first-child>span {
			margin-left: 0;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		.pagination>li:last-child>a,
		.pagination>li:last-child>span {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		.pagination>li>a:hover,
		.pagination>li>span:hover,
		.pagination>li>a:focus,
		.pagination>li>span:focus {
			color: #2a6496;
			background-color: #eee;
			border-color: #ddd;
		}

		.pagination>.active>a,
		.pagination>.active>span,
		.pagination>.active>a:hover,
		.pagination>.active>span:hover,
		.pagination>.active>a:focus,
		.pagination>.active>span:focus {
			z-index: 2;
			color: #fff;
			cursor: default;
			background-color: #428bca;
			border-color: #428bca;
		}

		.pagination>.disabled>span,
		.pagination>.disabled>span:hover,
		.pagination>.disabled>span:focus,
		.pagination>.disabled>a,
		.pagination>.disabled>a:hover,
		.pagination>.disabled>a:focus {
			color: #777;
			cursor: not-allowed;
			background-color: #fff;
			border-color: #ddd;
		}

		.pagination-lg>li>a,
		.pagination-lg>li>span {
			padding: 10px 16px;
			font-size: 18px;
		}

		.pagination-lg>li:first-child>a,
		.pagination-lg>li:first-child>span {
			border-top-left-radius: 6px;
			border-bottom-left-radius: 6px;
		}

		.pagination-lg>li:last-child>a,
		.pagination-lg>li:last-child>span {
			border-top-right-radius: 6px;
			border-bottom-right-radius: 6px;
		}

		.pagination-sm>li>a,
		.pagination-sm>li>span {
			padding: 5px 10px;
			font-size: 12px;
		}

		.pagination-sm>li:first-child>a,
		.pagination-sm>li:first-child>span {
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}

		.pagination-sm>li:last-child>a,
		.pagination-sm>li:last-child>span {
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function () {

			$("#choices tr").each(function () {
				$(this).find('a').click(function () {
					$(this).parent().parent().find('a').removeClass('cur');
					$(this).addClass('cur');
					//TODO: 异步加载数据
				});
			}
			);

		});




	</script>

	<script type="text/javascript">
		//分页查询
		function ajaxLoadData(data) {
			$.ajax({
				url: commonurl + "/selectAll.product",
				type: "POST",
				data: data,
				dataType: "json",
				success: function (data) {
					if (data.success) {
						obj = data.obj;
						var datas = {
							sources: obj.list,
							commonurlimg: commonurlimg
						};
						$("#productContent").html(template("productTemplate", datas));
						myPaginatorFun("myPages", obj.pageNo, obj.pages);
					} else {
						alert(data.msg);
					}
				}

			})
		}

		$(function () {
			setInterval(function () {
				var t = new Date();
				var ts = "当前时间：" + t.getFullYear() + "年" + (t.getMonth() + 1) + "月" + t.getDate() + "日 " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds() + "";
				$("#currentTime").html(ts);
			}, 400);

			//刚进页面加载数据
			ajaxLoadData({

				pageNo: 1,
				productType: "全部",
				productDuration: "全部",
				productRate: "全部",
				productAmount: "全部"
			});
			myoptions.onPageClicked = function (event, originalEvent, type, page) {
				var productType = $(".bank_list_tp1 .cur").html();
				//console.log(productType+"--1");
				var productDuration = $(".bank_list_tp2 .cur").html();
				// console.log(productDuration+"--2");
				var productRate = $(".bank_list_tp3 .cur").html();
				// console.log(productRate+"--3");
				var productAmount = $(".bank_list_tp4 .cur").html();

				ajaxLoadData({
					pageNo: page,
					productType: productType,
					productDuration: productDuration,
					productRate: productRate,
					productAmount: productAmount
				});
			};

			//加载产品类型数据
			$.ajax({
				url: commonurl + "/selectAll.productType",
				type: "POST",
				data: {
					all: "all"
				},
				dataType: "json",
				success: function (data) {
					if (!data.success) {
						alert('加载产品类型数据失败');
						return;
					}
					var obj = data.obj;
					var datas = {
						sources: obj
					};
					$("#productType").html(template("productTypeTemplate", datas));


					$("#choices tr").each(function () {
						$(this).find('a').click(function () {
							$(this).parent().parent().find('a').removeClass('cur');
							$(this).addClass('cur');
							//TODO: 异步加载数据
						});
					}
					);



				}
			});

			//加载贷款周期数据
			$.ajax({
				url: commonurl + "/selectAllPeriod.period",
				type: "POST",
				data: {
					all: "all"
				},
				dataType: "json",
				success: function (data) {
					if (!data.success) {
						alert('加载公司数据失败');
						return;
					}
					var obj = data.obj;
					var datas = {
						sources: obj
					};
					$("#productDuration").html(template("productDurationTemplate", datas));

					$("#choices tr").each(function () {
						$(this).find('a').click(function () {
							$(this).parent().parent().find('a').removeClass('cur');
							$(this).addClass('cur');
							//TODO: 异步加载数据


						});
					}
					);




				}
			});



		})


		function findDetail(id) {
			sessionStorage.setItem('productId', id);
			location.href = "product.html";
		}
		function findAllbyparam(i) {
			$(i).parent().parent().find('a').removeClass('cur');
			$(i).addClass('cur');

			var productType = $(".bank_list_tp1 .cur").html();
			//console.log(productType+"--1");
			var productDuration = $(".bank_list_tp2 .cur").html();
			// console.log(productDuration+"--2");
			var productRate = $(".bank_list_tp3 .cur").html();
			// console.log(productRate+"--3");
			var productAmount = $(".bank_list_tp4 .cur").html();
			//console.log(productAmount+"--4")
			//console.log($(i).html()+"###");

			//sessionStorage.setItem('productId',id);
			//location.href="product.html";

			ajaxLoadData({
				pageNo: 1,
				productType: productType,
				productDuration: productDuration,
				productRate: productRate,
				productAmount: productAmount
			});


		}


	</script>
</head>

<body>
	<div class="wrap header oauto clear">
		<div class="fl" style="font-size: 20px;
    font-weight: bold;
    color: #fff;
    line-height: 40px;
    padding-left: 10px;">万里金融系统</div>
		<div class="fr">
			<a id="currentTime" href="#">

			</a>
		</div>
	</div>
	<div class="logo-nav">
		<div class="wrap oauto">
			<div class="clear">

			</div>
		</div>
	</div>
	<div class="menu">
		<ul class="clear">
			<li><a href="index.html" class="cur">融资产品</a></li>
			<li><a href="news.html">每日新闻</a></li>
		</ul>
	</div>

	<div class="wrap bank_list">
		<div class="title clear">
			<h1 class="fl">产品分类</h1>
		</div>
		<div class="bank_list_tp">
			<table width="100%" border="0" cellpadding="0" cellspacing="0" id="choices">
				<tr class="bank_list_tp1">
					<td width="10%" align="right">产品类型：</td>
					<td width="12%" align="center" valign="top" class="qb">
						<a href="javascript:;" class="cur" onclick="findAllbyparam(this)">全部</a></td>
					<td id="productType" width="78%" class="txt clear">
						<script id="productTypeTemplate" type="text/html">
	  			{{each sources as i}}
            <a href="javascript:;" onclick="findAllbyparam(this)">{{i.productTypeName}}</a>
                {{/each}}
</script>
					</td>
				</tr>
				<tr class="bank_list_tp2">
					<td align="right">贷款周期：</td>
					<td align="center" valign="top" class="qb">
						<a href="javascript:;" class="cur" onclick="findAllbyparam(this)">全部</a></td>
					<td id="productDuration" class="txt clear">
						<script id="productDurationTemplate" type="text/html">
	  			{{each sources as i}}
          <a href="javascript:;" onclick="findAllbyparam(this)">{{i.periodName}}</a>
              {{/each}}
              <a href="javascript:;"  onclick="findAllbyparam(this)">其他</a>
</script>

					</td>
				</tr>
				<tr class="bank_list_tp3">
					<td align="right">贷款利率：</td>
					<td align="center" valign="top" class="qb">
						<a href="javascript:;" class="cur" onclick="findAllbyparam(this)">全部</a></td>
					<td class="txt clear">
						<a href="javascript:;" onclick="findAllbyparam(this)">6%以下</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">6%-8%</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">8%-10%</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">10%-12%</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">12%-14%</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">14%以上</a>
					</td>
				</tr>
				<tr class="bank_list_tp4">
					<td align="right">贷款规模：</td>
					<td align="center" valign="top" class="qb">
						<a href="javascript:;" class="cur" onclick="findAllbyparam(this)">全部</a></td>
					<td class="txt clear">
						<a href="javascript:;" onclick="findAllbyparam(this)">100万以下</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">100万-200万</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">200万-300万</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">300万-500万</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">500万-1000万</a>
						<a href="javascript:;" onclick="findAllbyparam(this)">1000万以上</a>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="wrap project_release">
		<div class="project_release_tp">融资产品</div>
		<div class="project_release_bt">
			<ul id="productContent">

				<script id="productTemplate" type="text/html">
	  			{{each sources as i index}}
    		  <li class="clear">
            	<div class="fl">
				<img src="../../images/yh{{index+1}}.png"  width="75px" height="40px" class="pr_logo" />
			</div>
                <div class="fl">
                	<dl>
                    	<dt>产品名称：<span class="king">{{i.proName}}</span></dt>
                    	<dt>所属银行：{{i.company.companyName}}</dt>                    	
                      <dt>产品类别：{{i.productType.productTypeName}}</dt>
                      <dt>放贷利率：{{i.rateFrom}}%-{{i.rateTo}}%（年化利率）</dt>
                      <dt>放贷金额：{{i.amountFrom}}-{{i.amountTo}}万</dt>
                      <dt>放贷期限：{{i.period.periodName}}</dt>
                    </dl>
                </div>
                <div class="view_details"><a href="javascript:;"  onclick="findDetail('{{i.id}}')">查看详细</a></div>
             </li>
                {{/each}}
</script>
			</ul>
		</div>
		<div style="text-align: center;">
			<ul id="myPages"></ul>
		</div>
		<!--  <div class="newslist_text"><a href="#">上一页</a><a href="#" class="cur">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">...</a><a href="#">下一页</a></div> -->
	</div>

	<div class="footer">Copyright &copy;  版权所有 | <a href="./backend/login.html" target="_blank">后台管理入口</a></div>
</body>

</html>